<!--
 * @Author: your name
 * @Date: 2021-12-14 10:42:03
 * @LastEditTime: 2022-08-04 18:01:48
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \starlight_cat\src\views\config\addArtist\component\tc.vue
-->
<template>
  <div class="my-popover">
    <slot name="trigger">
      <span @click="show = true">{{ triggertText }}</span>
    </slot>
    <el-drawer
      :with-header="false"
      :append-to-body="true"
      :visible.sync="show"
      size="100%"
    >
      <div v-if="show" class="my-popover_view">
        <div class="my-popover_header">
          <div class="my-popover_close_box" @click="show = false">
            <slot name="close">
              <img class="back-img" :src="require('./image/back.png')" />
            </slot>
          </div>
          <span class="my-popover_title">
            <slot name="title">{{ title }}</slot>
          </span>
        </div>
        <div class="my-popover_body">
          <Scrollbar>
            <div class="my-popover_body_view">
              <slot></slot>
            </div>
          </Scrollbar>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import Scrollbar from '@/components/MyScrollbar'
  export default {
    name: 'MyPopover',
    components: { Scrollbar },
    props: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      dialog: {
        default: false,
        type: Boolean,
      },
      title: {
        default: '标题',
        type: String || Number,
      },
      triggertText: {
        default: '点击打开',
        type: String || Number,
      },
    },
    data() {
      return {}
    },
    computed: {
      show: {
        get() {
          return this.dialog
        },
        set(val) {
          this.$emit('update:dialog', val)
        },
      },
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .my-popover {
    display: inline-block;
  }
  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all 0.3s ease;
  }
  .slide-fade-leave-active {
    transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(30%);
    opacity: 0;
  }
  /* //全屏弹窗 */
  .my-popover_view {
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    .my-popover_header {
      height: 64px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 14px;
      box-sizing: border-box;
      border-bottom: 1px solid #e5e9f2;
      .my-popover_close_box {
        margin-right: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover {
          cursor: pointer;
        }
        .back-img {
          width: 24px;
          height: 24px;
        }
      }
      .my-popover_title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2a304d;
        line-height: 22px;
      }
    }
    .my-popover_body {
      flex: 1;
      overflow: hidden;
      .my-popover_body_view {
        min-width: 1336px;
      }
    }
  }
</style>
